<template>
	<view class="fix">
		<fixtopVue>
			<template #l>
				<view @click="back" class="iconfont icon-jiantouyou"></view>
			</template>
			<template #c>
				<view class="tit">3/4法人信息</view>
			</template>
		</fixtopVue>
	</view>
	<view class="userinfobox">
		<view class="item">
			<view class="l">法人姓名</view>
			<view class="r"><input v-model="usemdinfostore.mdinfo.userinfo.name" type="text" placeholder="请输入法人姓名" /></view>
		</view>
		<view class="item">
			<view class="l">性别</view>
			<view class="rr">
				<view @click="changexb(`0`)" class="" :class="{selected:usemdinfostore.mdinfo.userinfo.xb==`0`}">男</view>
				<view @click="changexb(`1`)"  class="" :class="{selected:usemdinfostore.mdinfo.userinfo.xb==`1`}">女</view>
			</view>
		</view>
		<view class="item">
			<view class="l">证件号</view>
			<view class="r"><input v-model="usemdinfostore.mdinfo.userinfo.sfz" type="text" placeholder="请输入证件号" /></view>
		</view>
		<view class="img">
			 <view class="iconfont icon-zhaoxiangji"></view>
			 <view >身份证正面照(毕设无需)</view>
		</view>
	</view>
	<view class="bufix">
		 <view class="bu" @click="next">下一步</view>
	</view>
</template>
<script setup>
	import fixtopVue from '../../components/fixtop/fixtop.vue';
	import mdinfostore from '@/store/mdinfo.js'
	const usemdinfostore=mdinfostore()
	const next=()=>{
		const value=Object.values(usemdinfostore.mdinfo.userinfo)
		console.log(value)
		if(value.includes("")){
			return uni.showToast({
				title:"请填写完整信息！",
				icon:"none"
			})
		}
		uni.navigateTo({
			url:"/pages/yyzz/yyzz"
		})
	}
	const changexb=e=>{
		usemdinfostore.mdinfo.userinfo.xb=e
	}
	const back=()=>{
		uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.img{
		margin-top: 50rpx;
		height:500rpx;
		width: 100%;
		background-color: #f7f7f7;
		border-radius:10rpx ;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
		font-size: 27rpx;
		.iconfont{
			font-size: 70rpx
		}
	}
	.selected{
		border: 1rpx solid #ff6e53;
	}
	.bufix{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		background-color: #f7f7f7;
		display: flex;
		align-items: center;
		justify-content: center;
		.bu{
			width: 90%;
			height: 80rpx;
			background-color: #ff6e53;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: 700;
			border-radius: 80rpx;
			color: #fff;
		}
	}
	.fix {
		background-color: #ff644d;
		padding: 0 30rpx;

		.iconfont {
			height: 100%;
			font-size: 25rpx;
			transform: rotate(180deg);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			color: #fff;
		}

		.tit {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			color: #fff;
		}
	}

	.userinfobox {
		padding: 0 30rpx;
		background-color: #fff;

		.item {
			height: 120rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.l {
				width: 25%;
				font-size: 25rpx;
				font-weight: 700;
			}
            .rr{
				width: 75%;
				height: 100%;
				display: flex;
				align-items: center;
				gap: 50rpx;
				 >view{
					 height: 50%;
					 width: 150rpx;
					 background-color: #f7f7f7;
					 border-radius:10rpx ;
					 font-size: 25rpx;
					 display: flex;
					 align-items: center;
					 justify-content: center;
				 }
			}
			.r {
				width: 75%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				input{
					height: 60%;
					width: 100%;
					background-color: #f7f7f7;
					border-radius: 10rpx;
					font-size: 25rpx;
					padding-left:20rpx ;
				}
			}
		}
	}
</style>